<template>
  <div class="knowledge-graph-container">
    <iframe 
      ref="knowledgeGraphFrame"
      src="http://59.37.95.157:9621/webui/#/"
      class="knowledge-graph-iframe"
      frameborder="0"
      allowfullscreen
      @load="onIframeLoad"
    ></iframe>
    
    <!-- 左上角遮罩 -->
    <div class="overlay-mask left-top"></div>

    <!-- 右上角遮罩 -->
    <div class="overlay-mask right-top"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const knowledgeGraphFrame = ref<HTMLIFrameElement>();

const onIframeLoad = () => {
  console.log('知识图谱页面加载完成');
  // 这里可以添加与嵌入页面的交互逻辑
};

onMounted(() => {
  // 页面挂载后的初始化逻辑
  console.log('知识图谱组件已挂载');
});

// 如果需要与嵌入的页面进行通信，可以使用以下方法：
// 1. postMessage API 进行跨域通信
// 2. 监听iframe内的事件
const sendMessageToIframe = (message: any) => {
  if (knowledgeGraphFrame.value?.contentWindow) {
    knowledgeGraphFrame.value.contentWindow.postMessage(message, 'http://59.37.95.157:9621');
  }
};

// 监听来自iframe的消息
window.addEventListener('message', (event) => {
  if (event.origin === 'http://59.37.95.157:9621') {
    console.log('收到来自知识图谱页面的消息:', event.data);
    // 处理接收到的消息
  }
});
</script>

<style lang="scss" scoped>
.knowledge-graph-container {
  position: fixed;
  top: 60px; // 导航栏高度
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: calc(100vh - 60px);
  background-color: #fff;
  z-index: 100;
  
  .knowledge-graph-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
  
  .overlay-mask {
    position: absolute;
    background-color: #fff;
    z-index: 101;
    
    &.left-top {
      top: 0;
      left: 40px;
      width: 220px;
      height: 40px;
    }
    
    &.right-top {
      top: 0;
      right: 0;
      width: 43.5%;
      height: 40px;
    }
  }
}
</style> 